<script>
import axios from "axios";
export default {
  data () {
    return {
      active: 0,
      CardList:[],
      form:{
        id:"",
      },
    }
  },
  created() {
    this.findPage();
  },
  methods: {
    findPage(){
      axios.get("/order/NCard/findAll").then(res => {
        this.CardList = res.data;
        console.log("======================================");
        console.log(this.CardList);
      })
    },
    mmzhif(){
      this.$router.push('/secretfree');
    },
    onClickLeft(){
      this.$router.push('/bankcard');
    },
    toDingdan() {
      this.$router.push("/dcOrders");
    },
    toPersonalCenter() {
      this.$router.push('/PersonalCenter');
    },
    toxiaoxi() {
      this.$router.push('/newIndex');
    },
    toqianbao(){
      this.$router.push('/card');
    },
    findDelete(id) {
      axios.post(`/order/NCard/deleteId?id=${id}` ).then(res => {
        //提示删除成功
        this.$toast("删除成功");
        //刷新页面
        this.findPage();
      })
    },
    handleDeleteSuccess(id) {
      this.CardList = this.CardList.filter(card => card.id!== id);
      console.log("卡片删除成功");
    },
    handleDeleteFailure() {
      console.log("卡片删除失败");
    },
    handleDeleteError(err) {
      console.log("删除操作出错:", err);
    }
}
}
</script>
<template>
<div style="background: #f3fcff;height: 880px" >
  <div class="qianb">
    <h3>已绑定的卡片</h3>
    <van-button class="mianmi" @click="mmzhif">免密支付设置</van-button>
  </div>
  <van-divider class="xhx"></van-divider>
  <div class="card" v-for="card in CardList" :key ="card.id" >
    <van-swipe-cell :right-width="65" >
      <template #default>
        <div class="bank-card">
          <img :src="card.cardImg">
          <span class="name">{{card.cardName}}</span>
          <span class="mm"></span>
        </div>
      </template>
      <template #right>
        <button class="delete-btn" @click="findDelete(card.id)">删除</button>
      </template>
    </van-swipe-cell>
  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" to="/shouye">首页</van-tabbar-item>
    <van-tabbar-item icon="reorder-o" @click="toDingdan" to="/orders">订单</van-tabbar-item>
    <van-tabbar-item icon="wallet-o" @click="toqianbao">钱包</van-tabbar-item>
    <van-tabbar-item icon="chat-o" @click="toxiaoxi">消息</van-tabbar-item>
    <van-tabbar-item icon="my-o" @click="toPersonalCenter" to="/my">我的</van-tabbar-item>
  </van-tabbar>
  <van-button round type="info" class="btn1" @click="onClickLeft">添加卡片</van-button>
</div>
</template>
<style scoped>
.h1 {
  margin-top: -53px;
  color: #595959;
  font-size: 15px;
  margin-left: -294px;
}
.xhx{
  background-color: #949393;
 margin-top: -26px;
}
.btn{
  margin-left: 264px;
  top: -40px;
  width: 120px;
  height: 27px;
  background-color: #4faacb;
  border: 0px;
}
.card{
  display: flex;
  margin-top: 31px;
  margin-left: 3px;
  width: 100%;
  border-bottom:1px solid #949393 ;
}
.van-image{
  width: 40px;
  height: 40px;
  right: 13px;
  margin-top: -16px;
}
.span1{
  margin-left: 5px;
  margin-top: -8px;
}
.xhx1{
  background-color: #949393;
  margin-top: 11px;
}
.btn1{
  width: 250px;
  height: 40px;
  background-color: #4faacb;
  border: 0px;
  position: fixed;
  bottom: 136px;
  left: 89px;
}
.card1{
  display: flex;
  margin-top: 30px;
  margin-left: 3px;
}
.van-image1{
  width: 40px;
  height: 40px;
  right: 13px;
  top: 11px;
}
.span2{
  margin-left: 5px;
  margin-top: 4px;
}
.xhx3{
  background-color: #949393;
  margin-top: 18px;
}
.van-swipe-cell {
  width: 400px;
  height: 40px;
  margin-left: -22px;
  background-color: #f3fcff;
}
.van-cell-group {
  width: 400px;
  height: 40px;
  color: #333333;
  background-color: #f3fcff;
}
.van-swipe-cell__left,
.van-swipe-cell__right,
.van-swipe-cell__content {
  color: #333;
}
.card2{
  display: flex;
  margin-top: 30px;
  margin-left: 3px;
}
.van-image2{
  width: 40px;
  height: 40px;
  right: 13px;
  top: 11px;
}
.span3{
  margin-left: 5px;
  margin-top: 4px;
}
.xhx4{
  background-color: #949393;
  margin-top: 18px;
}
.card3{
  display: flex;
  margin-top: 30px;
  margin-left: 3px;
}
.van-image3{
  width: 40px;
  height: 40px;
  right: 13px;
  top: 11px;
}
.span4{
  margin-left: 5px;
  margin-top: 4px;
}
.xhx5{
  background-color: #949393;
  margin-top: 18px;
}
.bank-card {
          display: flex;
          align-items: center;
  img{
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-top: 10px;
  }
        }
.bank-logo {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
.bank-name {
  color: #333;
  font-size: 16px;
  margin-left: 23px;
}
.delete-btn {
  display: inline-block;
  width: 65px;
  height: 65px;
  background-color: red;
  color: white;
  line-height: 65px;
  text-align: center;
  margin-top: -14px;
}
.van-image4 {
  width: 40px;
  height: 40px;
margin-left: 38px;
  margin-top: -3px;
}
.mianmi{
  float: right;
  width: 120px;
  height: 40px;
  color: #FFFFFF;
  background-color: #52b7fd;
  border-radius: 20px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
